import React, { Component, PropTypes } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import Header from '../components/Header'
import MainSection from '../components/MainSection'
import * as TodoActions from '../actions/todos'


// Header 绑定action, 把数据传入 MainSection 组件
class App extends Component {
  render() {
    const { todos, actions } = this.props
    // console.log(todos)
    // todos 表示的是 state 的数据, 相当于全局 store
    return (
      <div>
        <Header addTodo={actions.addTodo} />
        <MainSection todos={todos} actions={actions} />
      </div>
    )
  }
}

//将 state.todos 绑定到 props 的 todos
function mapStateToProps(state) {
  return {
    todos: state.todos
  }
}

//将 action 的所有方法绑定到 props 上
function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(TodoActions, dispatch)
  }
}

//通过 react-redux 提供的 connect 方法将我们需要的 state 中的数据和 actions 中的方法绑定到 props 上
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App)
